﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0,minimal-ui,viewport-fit=cover">
    <title>沙孟海</title>
    <link rel="stylesheet" href="~/Areas/Study/css/app.css">
    <link rel="stylesheet" href="~/Areas/Study/css/chunk-191789d7.83118e3f.css">
    <link rel="stylesheet" href="~/Areas/Study/css/chunk-a5a92988.2f5d1efc.css">
    <link rel="stylesheet" href="~/Areas/Study/css/chunk-vendors.f8e2a465.css">
</head>
<body style="background-color:#FFF9F0;">
    <div id="app">
        <div data-v-3ef8012a="" class="loginbox">
            <div data-v-3ef8012a="" class="login1">
                <h3 data-v-3ef8012a="">
                    <img data-v-3ef8012a="" src="~/Areas/Study/image/detail_title.png">
                </h3>
                <div data-v-3ef8012a="" class="login-group">
                    <div data-v-3ef8012a="" class="van-cell-group van-hairline--top-bottom">
                        <div data-v-3ef8012a="" class="van-cell van-field">
                            <div class="van-field__left-icon">
                                <i class="van-icon">
                                    <img src="~/Areas/Study/image/user.png" class="van-icon__image">
                                </i>
                            </div><div class="van-cell__value van-cell__value--alone van-field__value">
                                <div class="van-field__body">
                                    <input id="txtName" type="text" placeholder="请输入姓名" class="van-field__control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <button data-v-3ef8012a="" class="login_btn van-button van-button--info van-button--large van-button--round" onclick="generate()">
                        <div data-v-3ef8012a="" class="van-button__content">
                            <span data-v-3ef8012a="" class="van-button__text">生成</span>
                        </div>
                    </button>
                </div>
            </div>
        </div>
        <div class="practice">
            <div class="practice-box" id="practice-box">
                啊
            </div>
        </div>
    </div>
</body>
</html>

<style type="text/css">
    #rwl-iqxin {
        position: fixed;
        transform: translate(-95px,0);
        width: 85px;
        height: 25px;
        font-size: 12px;
        font-weight: 500;
        font-family: Verdana, Arial, '宋体';
        color: #fff;
        background: #333;
        z-index: 2147483647;
        margin: 0;
        opacity: 0.05;
        transition: 0.3s;
        overflow: hidden;
        user-select: none;
        text-align: center;
        white-space: nowrap;
        line-height: 25px;
        padding: 0 16px;
        border: 1px solid #ccc;
        border-width: 1px 1px 1px 0;
        border-bottom-right-radius: 5px;
        box-sizing: content-box;
    }

        #rwl-iqxin input {
            margin: 0;
            padding: 0;
            vertical-align: middle;
            -webkit-appearance: checkbox;
            -moz-appearance: checkbox;
            position: static;
            clip: auto;
            opacity: 1;
            cursor: pointer;
        }

        #rwl-iqxin.rwl-active-iqxin {
            left: 0px;
            transform: translate(0,0);
            opacity: 0.9;
            height: 32px;
            line-height: 32px
        }

        #rwl-iqxin label {
            margin: 0;
            padding: 0;
            font-weight: 500;
        }

        #rwl-iqxin #rwl-setbtn {
            margin: 0 4px 0 0;
            padding: 0 0 0 4px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            background: #fff;
            color: #000;
        }

    .practice {
        display: none;
    }

    .practice-box {
        margin: 0 auto;
        width: 400px;
        height: 400px;
        background-image: url("../../Areas/Study/image/practice_box.png");
        font-size: 250px;
        text-align: center;
        line-height: 360px;
        color: #f17676;
    }
</style>
<script type="text/javascript" src="~/Areas/Study/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

    //生成字体
    function generate() {
        $(".practice").show();
        $(".practice").empty();
        var text = $("#txtName").val();
        var content = "";
        for (var i = 0; i < text.length; i++) {
            var charText = text.charAt(i);
            console.log(i);
            console.log(charText);
            content += "<div class=\"practice-box\">" + charText + "</div>";
        }
        $(".practice").html(content);
    }
</script>